<template>
	<!-- 辅助控制页面 -->
	<view class="container">
		<view class="cover" v-if="cover" @tap="closeSetting"></view>
		<!-- header搜索区域 -->
		<view class="search-fixed">
			<view class="choose-home">
				<ren-dropdown-filter class="filter" :filterData='filterData' :defaultIndex='defaultIndex' @onSelected='onSelected'></ren-dropdown-filter>
			</view>
			<view class="search-block">
				<search-block @click='getSearchList' @cancel="cancelSearch"></search-block>
			</view>
		</view>
		<!-- 列表展示区域 -->
		<view class="datalist-module">
			<view class="facility-module">
				<view class="facility-title">
					<!-- {{item.type == 1 ? '门' : (item.type == 2 ? '照明' : '空调')}} -->
					门
				</view>
				<monitor-control-item :list="doorList"></monitor-control-item>
			</view>
			<view class="facility-module">
				<view class="facility-title">
					照明
				</view>
				<monitor-control-item :list="bulbList"></monitor-control-item>
			</view>
			<view class="facility-module">
				<view class="facility-title">
					空调
				</view>
				<monitor-control-item :isPicker="isOpenPicker" :list="airList" @click="settingClick" @onConfirm="settingConfirm"></monitor-control-item>
			</view>
		</view>
	</view>
</template>

<script>
	import renDropdown from '../../components/ren-dropdown-filter/ren-dropdown-filter.vue'
	import searchBlock from '../../components/search-block/search-block.vue'
	import monitorControlItem from '../../components/minor-control-item/minor-control-item.vue'
	export default {
		components: {
			renDropdown,
			searchBlock,
			monitorControlItem
		},
		data() {
			return {
				isOpenPicker: false,
				cover: false,
				filterData: [
					[{
						text: '配电房1',
						value: ''
					}, {
						text: '状态1',
						value: 1
					}, {
						text: '状态2',
						value: 2
					}, {
						text: '状态3',
						value: 3
					}]
				],
				defaultIndex: [0],
				doorList: [{
						type: 1,
						name: '门1',
						status: 0,
						time: '2020/10/31 11:00:11 打开'
					},
					{
						type: 1,
						name: '门2',
						status: 1,
						time: '2020/10/31 11:00:11 关闭'
					}
				],
				bulbList: [{
						type: 2,
						name: '照明1',
						status: 0,
						time: '2020/10/31 11:00:11 打开'
					},
					{
						type: 2,
						name: '照明2',
						status: 1,
						time: '2020/10/31 11:00:11 关闭'
					},
				],
				airList: [{
						type: 3,
						name: '空调温度1',
						module: 1,
						status: 0,
						des: '18℃',
						time: '2020/10/31 11:00:11 打开'
					},
					{
						type: 3,
						name: '空调模式1',
						module: 2,
						status: 1,
						des: '制冷',
						time: '2020/10/31 11:00:11 打开'
					},
					{
						type: 3,
						name: '空调模式2',
						module: 2,
						status: 2,
						des: '制热',
						time: '2020/10/31 11:00:11 打开'
					},
				]

			}
		},
		methods: {
			onSelected(res) {
				console.log(res)
			},
			// 关闭设置
			closeSetting() {
				this.isOpenPicker = false
				console.log('false', this.isOpenPicker)
			},
			settingConfirm() {
				this.cover = false
			},
			settingClick() {
				this.cover = true
			},
			getSearchList(keywords) {
				console.log('key', keywords)
			},
			cancelSearch(keywords) {
				console.log('celkey', keywords)
			}

		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;

		// 遮盖层
		.cover {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: calc(100% - 527rpx);
			opacity: 0.3;
			background: #000000;
			z-index: 99999999;
		}

		.search-fixed {
			display: flex;
			flex-direction: row;
			position: fixed;
			top: 0;
			width: 100%;
			background-color: #fff;
			z-index: 999;
			height: 88rpx;
			white-space: nowrap;
			width: 100%;

			.search-block {}
		}

		.datalist-module {
			margin-top: 88rpx;
			margin-bottom: 24rpx;

			.facility-module {
				.facility-title {
					height: 78rpx;
					line-height: 78rpx;
					margin-left: 38rpx;
				}
			}
		}
	}
</style>
